const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 预渲染
// // npm i puppeteer
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer 

//删除console.log
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}

 
const indexCoreVal = "indexCore"
const adminCoreVal = "adminCore"

module.exports = {
  publicPath: '/',
  pages: {
    index: {
      // page 的入口
      entry: `src/${indexCoreVal}/main.js`,
      // 模板来源
      template: `public/index.html`,
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'breakon博客',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    breadmin: {
      // page 的入口
      entry: `src/${adminCoreVal}/main.js`,
      // 模板来源
      template: 'public/admin.html',
      // 在 dist/index.html 的输出
      filename: 'admin.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '博客后台',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // admin:"src/admin/main.js",
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    // subpage: 'src/subpage/main.js',
    // subpage: 'src/subpage/main.js'
  },
  // lintOnSave: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    //修改文件引入自定义路径
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@indexCore', resolve('src/indexCore'))
      .set('@adminCore', resolve('src/adminCore'))
      .set('@assets', resolve('src/assets'))
    // .set('@assets', resolve('src/assets')) 
    // .set
  },
  productionSourceMap: false,
  configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(
        // new UglifyJsPlugin(),

        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        }),
        
        // new PrerenderSPAPlugin({
        //   //  headless:false ,//  渲染时显示浏览器窗口。对于调试很有用。 
        //   staticDir: path.join(__dirname, './dist'),
        //   // 需要进行预渲染的路由路径 我这里做的是首页
        //   routes: [ '/index',"/","/article:id"],
        //   // html文件压缩
        //   minify: {
        //     minifyCSS: true, // css压缩
        //     removeComments: true // 移除注释
        //   },
        //   renderer: new Renderer({
        //     // Optional - The name of the property to add to the window object with the contents of `inject`.
        //     injectProperty: '__PRERENDER_INJECTED',
        //     // Optional - Any values you'd like your app to have access to via `window.injectProperty`.
        //     inject: {},
        //     // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。
        //     renderAfterDocumentEvent: 'render-event',
        //     renderer: new PrerenderSPAPlugin.PuppeteerRenderer({//这样写renderAfterTime生效了
        //       renderAfterTime: 5000
        //     })
        //   })

        // }),
// 添加



       

      )
    }
  }

  ,

}